<!--  -->
<template>
  <div>
    <!-- <nav-bar> </nav-bar> -->

    <div class="head">
      <div class="nav"></div>
      <div class="w15">
        <a href="#/mainPage">
          <div class="logo"></div>
        </a>
      </div>
      <div class="nav-text">
        <a>美食城商家后台</a>
      </div>
      <div class="nav-textRight">
        <a>商家入驻</a>
      </div>
      <div class="user-w15">
        <div class="user-avatar">
          <span
            class="el-avatar el-avatar--circle"
            style="height: 50px; width: 50px; line-height: 50px;"
          >
            <img src="./img/defaultAvatar.jpg" alt="" />
          </span>
        </div>

        <div class="user-name">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link" style="color:#fff">
              111 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu
              slot="dropdown"
              style="width: 150px; text-align: center"
            >
              <a href="#/mainPage">
                <el-dropdown-item icon="el-icon-s-home"
                  >前台首页</el-dropdown-item
                >
              </a>
              <el-dropdown-item icon="el-icon-switch-button"
                ><span>退出登录</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="aside">
      <el-menu
        :default-active="activeIndex"
        background-color="#ffff"
        text-color="black"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="">
          <i class="el-icon-s-data"></i>
          <span slot="title">店铺装修</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="content-right">
      <div class="mt20px"></div>
      <div class="mt20px">
        <div class="pageTitle clearfix">
          <div class="fl lineHeight40px">店铺基本信息</div>
          <div class="fr">
            <el-button type="primary" style="width:80px;height:40px;"
              >保存</el-button
            >
          </div>
        </div>
        <div class="w60 mt20px">
          <el-form ref="form" label-width="80px">
            <el-form-item style="margin-bottom:20px" label="店铺名称">
              <el-input placeholder="请输入店铺名称" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:20px;" label="类型">
              <el-select
                style="margin-right:10px;width:100%"
                v-model="type"
                filterable
                placeholder="请选择类型"
              >
                <el-option
                  style="padding-left:20px"
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="店铺logo" style="margin-bottom:20px">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <div class="areaPosition">
              <el-form-item style="margin-bottom:20px;" label="所在地区">
                <el-select
                  style="margin-right:10px;"
                  v-model="type"
                  filterable
                  placeholder="请选择所在地区"
                >
                  <el-option
                    style="padding-left:20px"
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-bottom:20px" label="市">
                <el-select
                  style="margin-right:10px;"
                  v-model="type"
                  filterable
                  placeholder="请选择市"
                >
                  <el-option
                    style="padding-left:20px"
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-bottom:20px" label="区">
                <el-select
                  style="margin-right:10px;"
                  v-model="type"
                  filterable
                  placeholder="请选择区"
                >
                  <el-option
                    style="padding-left:20px"
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item style="margin-bottom:20px" label="门店地址">
              <el-input placeholder="请输入门店地址" type="textarea"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:20px" label="门店位置">
              <div class="doorPosition">
                <el-input placeholder="请输入关键字检索" clearable></el-input>
                <el-button
                  type="primary"
                  style="width:150px;height:40px;margin-left:20px"
                  >提交位置</el-button
                >
              </div>
              <span style="color:orange">
                注：请在输入框搜索出店铺大致位置，点击店铺在地图中的位置，然后
                "提交位置"
              </span>
              <baidu-map class="bm-view" center="柳州">
                <bm-geolocation
                  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                  :showAddressBar="true"
                  :autoLocation="true"
                ></bm-geolocation>
              </baidu-map>
            </el-form-item>

            <el-form-item style="margin-bottom:20px" label="联系方式">
              <el-input placeholder="请输入联系方式" clearable></el-input>
            </el-form-item>

            <el-form-item style="margin-bottom:20px" label="推荐菜">
              <el-input placeholder="请输入推荐菜" type="textarea"></el-input>
            </el-form-item>

            <el-form-item style="margin-bottom:20px" label="营业时间">
              <el-table
                :data="tableData"
                style="width: 100%"
                :cell-style="rowClass"
                :header-cell-style="headClass"
              >
                <el-table-column prop="date" label="日期" width="150">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="timeSlot" label="时间段">
                  <el-time-picker
                    is-range
                    v-model="tableData.timeSlot"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.timeSlot }}</span>
                    </template>
                  </el-time-picker>
                </el-table-column>
              </el-table>
            </el-form-item>

            <el-form-item style="margin-bottom:20px" label="人均/元">
              <el-input style="width:25%" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:20px" label="优惠促销">
              <el-input placeholder="请输入优惠促销" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="店内环境" style="margin-bottom:20px">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
              >
                <i class="el-icon-plus"></i>
                <div class="el-upload__tip" slot="tip" style="color:orange">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/nav-bar";
export default {
  components: {
    "nav-bar": NavBar
  },
  name: "",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      type: "",
      value1: [new Date(2016, 10, 10, 10, 40), new Date(2016, 10, 10, 10, 40)],
      // value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      tableData: [
        {
          date: "周一",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        },
        {
          date: "周二",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        },
        {
          date: "周三",
          timeSlot: [
            new Date(2016, 9, 10, 10, 40),
            new Date(2016, 9, 10, 9, 40)
          ]
        },
        {
          date: "周四",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        },
        {
          date: "周五",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        },
        {
          date: "周六",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        },
        {
          date: "周日",
          timeSlot: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        }
      ],
      options1: [
        {
          value: "1",
          label: "小吃"
        },
        {
          value: "2",
          label: "自助餐"
        },
        {
          value: "3",
          label: "西餐"
        },
        {
          value: "4",
          label: "火锅"
        },
        {
          value: "5",
          label: "日式料理"
        },
        {
          value: "6",
          label: "包子粥铺"
        },
        {
          value: "7",
          label: "酒店宴席"
        }
      ]
    };
  },
  methods: {
    // 表头样式设置
    headClass() {
      return "text-align: center;background:#eef1f6;color:#606266";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url("./backstage.css");
</style>
